/**
 * 南昌旅游特色主题样式
 * 基于南昌城市特色元素设计
 */

:root {
  /* ========== 主色调 - 南昌红 ========== */
  --nanchang-red: #C8102E;
  --nanchang-red-light: #E63946;
  --nanchang-red-dark: #A01D2A;
  --nanchang-red-hover: #D91E36;
  
  /* ========== 强调色 - 滕王阁金 ========== */
  --tengwang-gold: #D4AF37;
  --tengwang-gold-light: #F4D03F;
  --tengwang-gold-dark: #B8941F;
  --tengwang-gold-hover: #E6C866;
  
  /* ========== 辅助色 - 赣江蓝 ========== */
  --ganjiang-blue: #1E88E5;
  --ganjiang-blue-light: #42A5F5;
  --ganjiang-blue-dark: #1565C0;
  --ganjiang-blue-hover: #2196F3;
  
  /* ========== 自然色 - 绿色 ========== */
  --nature-green: #4CAF50;
  --nature-green-light: #66BB6A;
  --nature-green-dark: #388E3C;
  
  /* ========== 中性色 ========== */
  --text-primary: #303133;
  --text-secondary: #606266;
  --text-tertiary: #909399;
  --text-disabled: #C0C4CC;
  
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F7FA;
  --bg-tertiary: #EBEDF0;
  
  --border-color: #DCDFE6;
  --border-color-light: #E4E7ED;
  
  /* ========== 渐变方案 ========== */
  --gradient-primary: linear-gradient(135deg, #C8102E 0%, #D4AF37 100%);
  --gradient-primary-reverse: linear-gradient(135deg, #D4AF37 0%, #C8102E 100%);
  --gradient-bg: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 50%, #90CAF9 100%);
  --gradient-bg-warm: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 50%, #FFCC80 100%);
  --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(227,242,253,0.8) 100%);
  --gradient-water: linear-gradient(180deg, rgba(30,136,229,0.1) 0%, rgba(30,136,229,0.05) 100%);
  
  /* ========== 阴影系统 ========== */
  --shadow-sm: 0 2px 8px rgba(200, 16, 46, 0.08);
  --shadow-md: 0 4px 12px rgba(200, 16, 46, 0.12);
  --shadow-lg: 0 8px 24px rgba(200, 16, 46, 0.16);
  --shadow-xl: 0 12px 32px rgba(200, 16, 46, 0.2);
  --shadow-gold: 0 4px 15px rgba(212, 175, 55, 0.3);
  
  /* ========== 圆角系统 ========== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  
  /* ========== 间距系统 ========== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  
  /* ========== 动画时长 ========== */
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  
  /* ========== 过渡效果 ========== */
  --transition-all: all var(--duration-normal) ease;
  --transition-transform: transform var(--duration-normal) ease;
  --transition-opacity: opacity var(--duration-normal) ease;
}

/* ========== 主题工具类 ========== */

/* 背景渐变 */
.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-bg {
  background: var(--gradient-bg);
}

.bg-gradient-card {
  background: var(--gradient-card);
}

/* 文字颜色 */
.text-nanchang-red {
  color: var(--nanchang-red);
}

.text-tengwang-gold {
  color: var(--tengwang-gold);
}

.text-ganjiang-blue {
  color: var(--ganjiang-blue);
}

/* 边框颜色 */
.border-nanchang-red {
  border-color: var(--nanchang-red);
}

.border-tengwang-gold {
  border-color: var(--tengwang-gold);
}

/* 阴影 */
.shadow-nanchang {
  box-shadow: var(--shadow-md);
}

.shadow-nanchang-lg {
  box-shadow: var(--shadow-lg);
}

.shadow-gold {
  box-shadow: var(--shadow-gold);
}

/* 按钮主题色 */
.btn-nanchang-primary {
  background: var(--gradient-primary);
  border: none;
  color: white;
  transition: var(--transition-all);
}

.btn-nanchang-primary:hover {
  background: var(--gradient-primary-reverse);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}

/* 卡片主题样式 */
.card-nanchang {
  background: var(--gradient-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: var(--transition-all);
  backdrop-filter: blur(10px);
}

.card-nanchang:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

/* 水波纹动画 */
@keyframes waterWave {
  0%, 100% {
    transform: translateX(0) translateY(0);
    opacity: 0.3;
  }
  50% {
    transform: translateX(20px) translateY(-10px);
    opacity: 0.5;
  }
}

.water-wave {
  animation: waterWave 3s ease-in-out infinite;
}

/* 城市剪影效果 */
.city-silhouette {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 100%);
  clip-path: polygon(
    0% 100%,
    5% 80%,
    10% 90%,
    15% 70%,
    20% 85%,
    25% 60%,
    30% 75%,
    35% 55%,
    40% 70%,
    45% 50%,
    50% 65%,
    55% 45%,
    60% 60%,
    65% 40%,
    70% 55%,
    75% 35%,
    80% 50%,
    85% 30%,
    90% 45%,
    95% 25%,
    100% 40%,
    100% 100%
  );
}

/* 滕王阁装饰元素 */
.tengwang-decoration {
  position: absolute;
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, var(--tengwang-gold) 0%, var(--tengwang-gold-dark) 100%);
  opacity: 0.1;
  border-radius: 50%;
  filter: blur(40px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  :root {
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --radius-lg: 8px;
    --radius-xl: 12px;
  }
}

